<template>
  <div class="dashboard-editor-container">
    <ChartCardGroup :panel-list="cardData" :default-value="panelData" :top="10" />
    <el-row :gutter="30">
      <el-col :span="8">
        <div class="notice-box">
          <div class="title-box">
            <svg-icon icon-class="hexagon" class-name="title-icon blue" />
            <div class="title">公告通知</div>
            <div class="more" @click="router.push('/notice/index')">•••</div>
          </div>
          <div v-if="noticeList.length">
            <div v-for="(item, index) in noticeList" :key="index" class="notice-item">
              <div class="notice-title">{{ item.title }}</div>
              <div class="notice-time">{{ item.createTime.slice(0, 10) }}</div>
            </div>
          </div>
          <div v-else class="notice-empty">暂无公告</div>
        </div>
        <div class="links-box">
          <div class="title-box">
            <svg-icon icon-class="hexagon" class-name="title-icon green" />
            <div class="title">快捷导航</div>
          </div>
          <div class="links-wrapper">
            <div class="link-item" @click="router.push('/product/index')">
              <div class="link-icon blue">
                <svg-icon icon-class="product" class-name="icon" />
              </div>
              <div class="link-text">商品管理</div>
            </div>
            <div class="link-item" @click="router.push('/order/order')">
              <div class="link-icon green">
                <svg-icon icon-class="orders" class-name="icon" />
              </div>
              <div class="link-text">订单管理</div>
            </div>
            <div class="link-item" @click="router.push('/business/index')">
              <div class="link-icon orange">
                <svg-icon icon-class="business" class-name="icon" />
              </div>
              <div class="link-text">经销商管理</div>
            </div>
            <div class="link-item" @click="router.push('/factory/index')">
              <div class="link-icon purple">
                <svg-icon icon-class="factory" class-name="icon" />
              </div>
              <div class="link-text">工厂管理</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="school-box">
          <div class="title-box">
            <svg-icon icon-class="hexagon" class-name="title-icon orange" />
            <div class="title">经销商订单</div>
          </div>
          <div class="chart-box">
            <line-chart
              ref="orderChart"
              lazy
              height="90%"
              :smooth="false"
              :legend-names="['经销商订单']"
              legend-color="#666"
              :y-max="5"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="30">
      <el-col :span="8">
        <div class="chart-wrapper">
          <div class="title-box">
            <svg-icon icon-class="hexagon" class-name="title-icon orange" />
            <div class="title">分类商品</div>
          </div>
          <div style="height: 250px;">
            <pie-chart
              label-color="#333"
              border-color="#fff"
              :border-width="2"
              :radius="[0, 70]"
              height="90%"
              label-line-show
              :legend="false"
              :colors="colors"
              :chart-data="categoryData"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-wrapper">
          <div class="title-box">
            <svg-icon icon-class="hexagon" class-name="title-icon grey" />
            <div class="title">近7天经销商数</div>
          </div>
          <div class="chart-box" style="padding: 0 10px 20px;">
            <line-chart
              ref="businessChart"
              lazy
              height="100%"
              :colors="['#f88b65']"
              :smooth="false"
              :legend-names="['经销商数']"
              legend-color="#666"
              :y-max="5"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-wrapper">
          <div class="title-box">
            <svg-icon icon-class="hexagon" class-name="title-icon grey" />
            <div class="title">营业额</div>
          </div>
          <div class="chart-box" style="padding: 0 30px 20px;">
            <bar-chart
              ref="incomeChart"
              :legend-names="['营业额']"
              :colors="['#74d1dd']"
              legend-color="#74d1dd"
              axis-line-color="#888"
              axis-color="#333"
              :bar-width="24"
              lazy
              legend
              width="100%"
              height="100%"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="btns">
      <div class="btn" @click="router.push('/factory/index')">
        <svg-icon icon-class="factory" class-name="icon" />
        <div class="info">工厂管理</div>
      </div>
      <div class="btn">
        <svg-icon icon-class="product" class-name="icon" @click="router.push('/product/index')" />
        <div class="info">商品管理</div>
      </div>
      <div class="btn" @click="router.push('/business/index')">
        <svg-icon icon-class="business" class-name="icon" />
        <div class="info">经销商管理</div>
      </div>
      <div class="btn" @click="router.push('/staff/index')">
        <svg-icon icon-class="peoples" class-name="icon" />
        <div class="info">员工管理</div>
      </div>
      <div class="btn" @click="router.push('/order/order')">
        <svg-icon icon-class="orders" class-name="icon" />
        <div class="info">订单管理</div>
      </div>
      <div class="btn" @click="router.push('/franchisee/scopeInfo')">
        <svg-icon icon-class="franchisee" class-name="icon" />
        <div class="info">加盟商管理</div>
      </div>
      <div class="btn" @click="router.push('/platform/params')">
        <svg-icon icon-class="question" class-name="icon" />
        <div class="info">平台管理</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import moment from 'moment'
import { priceToYuan } from '@/utils'

const router = useRouter()

// refs
const orderChart = ref(null)
const businessChart = ref(null)
const incomeChart = ref(null)

// 响应式数据
const categoryData = ref([])
const noticeList = ref([])
const cardData = ref([])

// 常量数据
const colors = [
  '#3aa0ff', '#36cbcb', '#4ecb73', '#fad337', '#f2637b',
  '#D86C7D', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
  '#ca8622', '#bda29a', '#6e7074'
]

const panelData = [
  {title: '经销商数', icon: 'business', sort: 1},
  {title: '员工数', icon: 'peoples', sort: 0},
  {title: '工厂数', icon: 'factory', sort: 2},
  {title: '订单数', icon: 'orders', sort: 3},
  {title: '订单总额', icon: 'money', sort: 4}
]

// 工具方法
const toChartData = (data, count = 15) => {
  const obj = {}
  data.forEach(v => obj[v.date] = parseInt(v.value))
  return Array.from({length: count}, (v, i) => i).map(day => {
    const date = moment().subtract(day, 'days').format('YYYY-MM-DD')
    return {date, value: obj[date] ? obj[date] : 0}
  }).reverse()
}

const getDateList = (days = 30) => {
  return Array.from({length: days}, (v, i) => i).map(day => {
    return moment().subtract(day, 'days').format('YYYY-MM-DD')
  }).reverse()
}

// 生命周期钩子
onMounted(() => {
  // 统计数据
  $xl.apis.test().then(res => {
    const dataInfoMap = new Map(panelData.map(item => [item.title, item]))
    cardData.value = Object.keys(res.data)
        .map(key => {
          const item = res.data[key]
          const titleItem = dataInfoMap.get(item.name)
          if (titleItem) {
            let num = item.num
            if (item.name === '订单总额' || item.name === '订单成本金额') {
              num = priceToYuan(num)
            }
            return {
              ...titleItem,
              num,
              beforeStyle: {
                fontSize: '3.1rem',
                top: '1.8rem',
                left: '4rem'
              },
              afterStyle: {
                fontSize: '2.6rem',
                bottom: '0.4rem',
                right: '1.9rem'
              }
            }
          }
          return null
        })
        .filter(item => item)
        .sort((a, b) => a.sort - b.sort)
  }).catch(err => {
    $xl.modal.msgError(err)
  })

  // 公告数据
  $xl.apis.test().then(res => {
    noticeList.value = res.data
  }).catch(err => {
    $xl.modal.msgError(err)
  })

  // 订单图表数据
  const dates = getDateList(30)
  orderChart.value.loadChart({
    xAxisNames: dates.map(v => v.slice(5)),
    chartData: [Array(30).fill(0)]
  })

  // 分类统计
  categoryData.value = Array(5).fill(0).map((_, idx) => ({
    name: `分类${ idx }(0)`,
    value: 0,
    itemStyle: {
      color: colors[idx]
    }
  }))

  // 经销商数据
  const businessData = Array(7).fill(0).map((_, i) => ({
    date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
    value: 0
  }))
  businessChart.value.loadChart({
    xAxisNames: businessData.map(v => v.date.slice(5)),
    chartData: [businessData.map(v => v.value)]
  })

  // 营业额数据
  const incomeData = Array(7).fill(0).map((_, i) => ({
    date: moment().subtract(i, 'days').format('YYYY-MM-DD'),
    value: 0
  }))
  incomeChart.value.loadChart({
    xAxisNames: incomeData.map(v => v.date.slice(5)),
    chartData: [incomeData.map(v => v.value)]
  })
})
</script>

<style lang="scss" scoped>

.dashboard-editor-container {
  padding: 15px 30px;
  background-color: rgb(240, 242, 245);
}


.title-box {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 10px;

  .title-icon {
    position: absolute;
    font-size: 18px;
    left: -8px;
    top: 10px;

    &.blue {
      color: #3f93fe;
    }

    &.green {
      color: #74d1dd;
    }

    &.orange {
      color: #f88b65;
    }

    &.purple {
      color: #7a86ed;
    }

    &.grey {
      color: #5a8bc4;
    }
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-left: 24px;
  }

  .more {
    font-size: 20px;
    margin-right: 20px;
    color: #888;
    cursor: pointer;
  }
}

.notice-box {
  height: 170px;
  background: #fff;
  padding: 10px 0 0;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;

  .notice-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    color: #b1b1b1;
  }

  .notice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    padding: 0 20px 0 40px;
    position: relative;

    &:before {
      position: absolute;
      top: 12px;
      left: 25px;
      content: '';
      width: 5px;
      height: 5px;
      background: #3f93fe;
      border-radius: 10px;
      margin-right: 10px;
    }

    .notice-title {
      font-size: 14px;
      color: #333;
    }

    .notice-time {
      font-size: 14px;
      color: #333;
    }
  }
}

.links-box {
  height: 160px;
  background: #fff;
  padding: 10px 0 0;
  border-radius: 10px;
  overflow: hidden;

  .links-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 14px;

    .link-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .link-icon {
        width: 45px;
        height: 45px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;

        &.blue {
          background: linear-gradient(to bottom, #3f93fe, #4fb5ff);
        }

        &.green {
          background: linear-gradient(to bottom, #74d1dd, #6fd3a6);
        }

        &.orange {
          background: linear-gradient(to bottom, #f88b65, #fea258);
        }

        &.purple {
          background: linear-gradient(to bottom, #7a86ed, #c5aefe);
        }

        .icon {
          color: white;
          font-size: 17px;
        }
      }

      .link-text {
        font-size: 14px;
      }
    }
  }
}

.school-box {
  border-radius: 10px;
  height: 350px;
  background: #fff;
  padding: 10px 0 0;
  margin-bottom: 32px;
  overflow: hidden;

  .chart-box {
    padding: 0 30px 10px;
    height: 320px;
  }
}

.chart-wrapper {
  background: #fff;
  height: 350px;
  border-radius: 10px;
  padding: 10px 0 0;
  margin-bottom: 32px;
  overflow: hidden;

  .chart-box {
    padding: 0 30px 20px 10px;
    height: 300px;
  }

  .sortBottom {
    margin-right: 15px;
  }
}

.btns {
  display: flex;
  height: 200px;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}

.btn {
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666666;
  font-weight: bold;
  cursor: pointer;

  .icon {
    font-size: 42px;
    margin-bottom: 20px;
    color: #888888;
  }
}
</style>
